<template>
	<view>
		<swiper @change="change" style="height: 600rpx;margin-top: 30rpx;text-align: center;">
			<swiper-item><image :src="detailList.image" style="background-color: #666155; width: 100%;height: 487rpx;" mode="aspectFill"></image></swiper-item>
		</swiper>
		<!-- </uni-swiper-dot> -->
		<view style="margin: 50rpx 30rpx 0;">
			<view style="display: flex;justify-content: space-between;margin-bottom: 30rpx;">
				<view>
					<text style="font-size: 24rpx;color: #F61B00;">¥</text>
					<text style="font-size: 48rpx;color: #F61B00;">{{detailList.price}}</text>
					<text style="font-size: 24rpx;color: #B4B4B4;margin-left: 10rpx; text-decoration: line-through;">¥{{detailList.productprice}}</text>
				</view>
				<view style="display: flex;align-items: center;">
					<image src="/static/shequ/秒杀倒计时@2x.png" style="width: 150rpx;height: 29rpx;" mode="aspectFit"></image>
					<uni-countdown color="#fff" background-color="#FF586D" :showDay="false" :hour="hour" :minute="minute" :second="second"></uni-countdown>
				</view>
			</view>
			<text style="font-size: 32rpx;color: #1A222B;line-height: 50rpx;">{{detailList.share_title}}</text>
		</view>
		<view style="margin: 30rpx 30rpx;display: flex;justify-content: space-between;">
			<view style="display: flex;align-items: center;">
				<text style="font-size: 24rpx;color: #999999;">6.69万人买过</text>
			</view>
			<view style="display: flex;">
				<image src="/static/shequ/jian.png" :disabled="subState" @click="sub" style="width: 45rpx;height: 44rpx;" mode="aspectFit"></image>
				<text>{{num}}</text>
				<image src="/static/shequ/jia.png" class="addState" @click="add" style="width: 45rpx;height: 44rpx;" mode="aspectFit"></image>
			</view>
		</view>
		<view class="bz">
			<image src="/static/shequ/gouxuan.png" mode="aspectFit"></image>
			<text>1小时送达</text>
			<image src="/static/shequ/gouxuan.png" style="margin-left:50rpx;" mode="aspectFit"></image>
			<text>实付满49元包邮</text>
			<image src="/static/shequ/gouxuan.png" style="margin-left:50rpx;" mode="aspectFit"></image>
			<text>坏单包退</text>
		</view>
		<view style="height: 20rpx;background-color: #F7F7F7;"></view>
		<!-- 商品详情 -->
		<view class="">
			<!-- 头部选项卡 -->
			<view class="detail">
				<view style="margin: 0 30rpx;" v-for="(tab, index) in navList" :key="tab.id" :class="{ activite: navIndex === index }" @click="checkIndex(index)">{{ tab }}</view>
			</view>
			<!-- 内容切换 -->
			<view v-if="!navIndex">
				<view><image src="" style="background-color: #D1EBFD; height: 536rpx;width: 100%;" mode="widthFix"></image></view>
			</view>
			<view v-if="navIndex">
				<view>
				<!-- 头部选项卡 -->
					<view class="pj">
						<view
							style="margin: 0 30rpx 40rpx;width: 160rpx;height: 50rpx;border-radius: 25rpx;background-color: #FFF3F3;display: flex;align-items: center;justify-content: center;"
							v-for="(item, index) in pjList"
							:key="index"
							:class="{ 'activite': spIndex === index }"
							@click="pjIndex(index)"
						>
							{{ item }}
						</view>
					</view>
					<!-- 内容切换 -->
					<view v-if="spIndex === 0">
						<view style="margin: 30rpx;border-bottom: 2rpx solid #F8F8F8;padding-bottom: 30rpx;">
							<view style="display: flex;align-items: center; justify-content: space-between;">
								<view style="display: flex;align-items: center;">
									<image src="/static/index/3.png" style="width: 58rpx;height: 58rpx;border-radius: 50%;" mode="aspectFit"></image>
									<view style="margin-left: 15rpx;">
										<text>zhahdjd</text>
										<uni-rate  v-model="value" :max="5" :readonly="true" :value="5" :size="12" color="#ADC3D0" activeColor="#FF6F00"></uni-rate>
									</view>
								</view>
								<text>2019.10.10</text>
							</view>
							<text style="line-height: 40rpx; font-size: 22rpx;color: #666666;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;margin-top: 30rpx;">
								第二次购买了，爽滑不腻，而且还律新鲜，我家小宝贝也喜欢吃，不拦着一次可以吃一大盘。快递也很给力，可能知道我馋这个已经很
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 110rpx;display: flex;justify-content: space-between;position: fixed; bottom:0;right:0;width: 100%;background-color: #EEEEEE;">
			<view style="display: flex;width: 510rpx;justify-content: space-between;align-items: center;">
				<navigator url="../shoppingCart/shoppingCart">
					<view style="padding-left: 30rpx; display: flex;align-items: center;">
						<image src="/static/shequ/cart.png" style="width: 40rpx;height: 39rpx;" mode="aspectFit"></image>
						<text style="font-size: 24rpx;color: #1B1B1B;margin-left: 10rpx;">已选（{{num}}）</text>
					</view>
				</navigator>
				<text style="font-size: 20rpx;font-weight: bold;color: #F61B00;padding-right: 30rpx;">¥{{totalPrice}}</text>
			</view>
			<button
				type="default"
				@click="submitOrder"
				style="width: 240rpx;background-color: #00C657;color: #fff;font-size: 32rpx;display: flex;align-items: center;justify-content: center;border-radius: 0;"
			>
				去支付
			</button>
		</view>
		<view style="display: block;height: 150rpx;"></view>
	</view>
</template>
<script>
	import {Storage} from '@/static/libs/utils.js'
	import {reallyBuy} from '@/utils/index.js'
export default {
	data() {
		return {
			dots: {
				backgroundColor: '#EEEEEE',
				selectedBackgroundColor: '#00C657'
			},
			current: 0,
			hour: 0,
			minute: 43,
			second: 32,
			num: 0,
			totalPrice:0,
			subState: 'true',
			navIndex: 0,
			navList: ['商品详情', '用户评价(16347)'],
			pjList: ['全部(634)', '晒图(634)', '好评(634)', '差评(322)'],
			spIndex: 0,
			value: 5,
			info:3,
			mode:'round',
			detailList:[]
			//goods_id:''//商品id
		};
	},
	onLoad(options){//接收参数
		console.log('canshu',options)
		this.actId = options.id
		this.getDetailsData(options.id)
	},
	mounted() {
	},
	methods: {
		goback(){
			uni.navigateTo({
				url:"../shequ/shequ"
			})
		},
		checkIndex(index) {
			this.navIndex = index;
		},
		change(e) {
			this.current = e.detail.current;
		},
		sub() {
			if (this.num < 1) {
				this.subState = false;
			} else {
				this.num--;
			}
			this.totalPrice = this.num * (this.detailList.price)
		},
		add() {
			this.num++
			this.token = Storage.get('token')
			this.$request.get("/wxapp.php?from=wxapp&c=entry&a=wxapp&do=user&&m=lionfish_comshop",
			{
				controller:'car.add',
				token:this.token,
				goods_id:this.actId,
				community_id:1,
				quantity:1,
				buy_type:'dan',
				is_just_addcar:1
			}).then(res=>{
		        console.log('gouwuche',res)
			})
			this.totalPrice = this.num * (this.detailList.price)
		},
		pjIndex(index) {
			this.spIndex = index;
		},
		//商品详情
		getDetailsData(e){
			this.$request.get(`/wxapp.php?i=undefined&t=undefined&v=undefined&from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&sign=6e3dc4f631720b97f371a16f44f0bd57&controller=goods.get_goods_detail&token=4b3cc613053d4d65e091961e830fcb66&id=${e}&community_id=1`)
			.then(res => {
				console.log('商品详情',res.data.data.goods)
				this.detailList=res.data.data.goods
				//this.goods_id = res.data.data.goods_id //商品id
			})
		},
		//提交订单
		submitOrder(){ 
			// this.token = Storage.get('token')
			// this.$request.get("/wxapp.php?from=wxapp&c=entry&a=wxapp&do=user&&m=lionfish_comshop",
			// {
			// 	controller:'car.sub_order',
			// 	token:this.token,
			// 	pay_method:'wxpay',
			// 	buy_type:'dan',
			// 	pick_up_id:1,
			//     dispatching:'pickup',
			// 	ziti_name:111,
			// 	ziti_mobile:18000000000,
			// 	ck_yupay:0,
			// 	use_score:0,
			// 	}).then(res=>{
			// 	console.log('提交订单',res.data.order_all_id)
				//this.order_id = res.data.order_id
			    uni.navigateTo({
			    	url:'../pay/pay?totalPrice='+this.totalPrice
					//url:'../pay/pay?res.data.order_id='+res.data.order_id
			    })
			// })
		}
	}
};
</script>
<style lang="scss">
.select {
	display: none;
	width: 60rpx;
	height: 8rpx;
	background-color: #00c657;
	margin-left: 30rpx;
	border-radius: 4rpx;
}

.pj {
	display: flex;
	font-size: 24rpx;
	color: #999999;
	border-bottom: 2rpx solid #f8f8f8;
	.active{
		color: #FF6F00;
	}
}
.detail {
	height: 100rpx;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #999999;
}
.activite {
	color: #1b1b1b;
}
.bz {
	display: flex;
	align-items: center;
	height: 90rpx;
	border-top: 2rpx solid #f8f8f8;
	margin: 0 30rpx;
}
.bz image {
	width: 26rpx;
	height: 26rpx;
}
.bz text {
	font-size: 22rpx;
	color: #b2b5bf;
	margin-left: 10rpx;
}
</style>
